<!--
 * @Descripttion: GGB
 * @version: 1.0
 * @Author: GGB
 * @Date: 2021-12-11 09:07:47
 * @LastEditors: GGB
 * @LastEditTime: 2021-12-11 09:12:52
-->
<template>
  <div>
    <ul>
      <li :key="c.id" v-for="c in courses">
        {{ courses[0].id }}-{{ courses[0].name }}
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

interface Course {
  id: number;
  name: string;
}
export default defineComponent({
  setup() {
    const courses = ref<Course[]>([]);
    setTimeout(() => {
      courses.value.push({
        id: 1,
        name: "全栈架构师",
      });
    }, 1000);
    return { courses };
  },
});
</script>

<style scoped></style>
